<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：5、多个组件的过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<style>
	.component-fade-enter-active, .component-fade-leave-active {
	  transition: opacity .3s ease;
	}
	.component-fade-enter, .component-fade-leave-active {
	  opacity: 0;
	}	
	</style>
</head>
<body>
	<div id="app">
		<input type="radio" id="A" value="A" v-model="switched">
		<label for="A">A</label>
		<input type="radio" id="B" value="B" v-model="switched">
		<label for="B">B</label>
		<transition name="component-fade" mode="out-in">
		  <component v-bind:is="view"></component>
		</transition>	
	</div>

	<script type="text/javascript">
		// 多个组件的切换，其实在基础篇的demo53动态组件里已有提及，使用<component>标签
		// 现在要对多个组件进行过渡，在外面再套下<transition>标签即可
		// 
		// eg：
		var vm = new Vue({
			el: '#app',
			data: {
				view: 'v-a',
				switched: 'A'
			},
			components: {
				'v-a': {
				  template: '<div>Component A</div>'
				},
				'v-b': {
				  template: '<div>Component B</div>'
				}
			},
			watch: {
				switched: function(newVal, oldVal){
					if(newVal == 'A'){
						this.view = 'v-a'
					}else{
						this.view = 'v-b'
					}
				}
			}			
		})
	</script>
</body>
</html>